<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8"/>
    <title>时钟</title>

    <style>
        body {
            color: #000000;
            background-color: #ffffff;
            margin: 0;
            padding: 5%;
        }

        .page {
            position: fixed;
            width: 90%;
            height: 90%;
            border-width: 1px;
            border-style: solid;
        }

        .time_container,
        .date_container {
            width: 100%;
            margin: auto;
            text-align: center;
        }

        .time_container {
            top: 0;
            height: 50%;
        }

        .date_container {

        }

        .time {
            padding-top: 120px;
            font-size: 16rem;
            font-weight: bold;
        }

        .date {
            padding-top: 40px;
            font-size: 6rem;
        }

        .calendar {
            padding-top: 40px;
            font-size: 3.6rem;
        }
    </style>
</head>

<body>
<div class="page">
    <div class="time_container">
        <div class="time" id="time">11:27</div>
    </div>

    <div class="date_container">
        <div class="date" id="date">1月10日</div>
        <div class="date" id="week">星期三</div>
        <div class="calendar" id="nongli">鼠年 八月十五</div>
        <div class="calendar" id="festival"></div>
    </div>
</div>

<script type="module">
    import { calendar } from "./js/calendar.js";

    function update() {
        var date = new Date()
        console.log(date)
        // var utc8DiffMinutes = date.getTimezoneOffset() + 480
        // date.setMinutes(date.getMinutes() + utc8DiffMinutes)

        var timeString = date.getHours() + ':' + ('0' + date.getMinutes()).slice(-2)
        var dateString = (date.getMonth() + 1) + '月' + date.getDate() + '日'
        var weekList = ['日', '一', '二', '三', '四', '五', '六']
        var weekString = '星期' + weekList[date.getDay()]

        var solar2lunar = calendar.solar2lunar(date.getFullYear(),date.getMonth()+1,date.getDate());

        document.getElementById("time").innerHTML = timeString
        document.getElementById("date").innerHTML = dateString
        document.getElementById("week").innerHTML = weekString
        document.getElementById("nongli").innerHTML = solar2lunar.gzYear+solar2lunar.Animal+"年 "+solar2lunar.IMonthCn+solar2lunar.IDayCn;
        var festival = "";
        if (solar2lunar.festival){
            festival += " "+solar2lunar.festival
        }
        if (solar2lunar.lunarFestival){
            festival += " "+solar2lunar.lunarFestival
        }
        document.getElementById("festival").innerHTML = festival
    }

    update()
    setInterval(update, 60 * 1000)
</script>
</body>
</html>
